<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:16:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:06:23
 * @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
-->
<template>
  <div >
    <div class="item_title" v-if="title !== ''" style="flex-direction: row">
      <div class="zuo" v-if="showLeft"></div>
      <span class="title-inner test" @click="$emit('click')">&nbsp; &nbsp;&nbsp;{{ title }}&nbsp;&nbsp;&nbsp; </span>
      <div class="you" v-if="showRight"></div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: () => "",
    },
    showLeft:{
      type:Boolean,
      default:true
    },
    showRight:{
      type:Boolean,
      default:true
    }
  },
  created() {},

  mounted() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);

.test{
  color:red;
}
  .item_title {
    height: $item-title-height;
    line-height: $item-title-height;
    width: 100%;
    color: #31abe3;
    text-align: center;
    // background: linear-gradient(to right, transparent, #0f0756, transparent);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .zuo,
    .you {
      width: 58px;
      height: 14px;
      background-image: url("../../assets/img/titles/zuo.png");
    }

    .you {
      transform: rotate(180deg);
    }
    .title-inner {
      font-weight: 700;
      letter-spacing: 2px;
      margin-left: 10px;
      margin-right: 10px;
      word-break: keep-all;
     /* background: linear-gradient(92deg, #8cea0b 0%, #05f710 48.8525390625%, #0ddbed 100%);*/
      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
</style>
